<template>
  <div class="wrapper">
    <div class="actions" style="margin-bottom: 10px">
      <div class="left">
        <el-button type="primary" plain size="mini" @click="handleDel"
          >删除</el-button
        >
        <el-button type="primary" plain size="mini" @click="handleExport">
          导出</el-button
        >
      </div>
      <div class="right" style="display: flex">
        <el-button
          type="primary"
          size="mini"
          @click="resultClickFn"
          style="margin: 0px 10px 0px 0px"
          >重置
        </el-button>
        <SettinUp
          :settype="headerId"
          :objSettinUpdata="objSettinUp"
          :key="tabIndex"
        ></SettinUp>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table" v-if="header_data_list.length > 0" :key="tabIndex">
      <TableHeader
        ref="TableHeaderList"
        :header_data_list="header_data_list"
        :HeaderData="HeaderData"
        :propMap="propMap"
        :redact="''"
        :particulars="''"
        :objheader="objheader"
        @orderIdNumsEvent="handleDeleteType"
        :operation_type="operation_type"
        @handleClickDetail_second="handleClickDetail_second"
        @handleClickEdit_second="handleClickEdit_second"
      >
      </TableHeader>
    </div>
    <div class="actions" style="padding-top: 10px; width: 100%">
      <div class="left"></div>
      <div class="right">
        <el-pagination
          background
          small
          :current-page="paginations.pageIndex"
          :page-sizes="paginations.pageSizes"
          :page-size="paginations.pageSize"
          :layout="paginations.layout"
          :total="paginations.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-drawer size="30%" :visible.sync="drawerVisible" direction="rtl">
      <template slot="title">
        <div>
          {{ this.modetip }}
        </div>
      </template>
      <DeviceOrder
        :mode="mode"
        :id="nowId"
        @close="handleCloseDrawer"
      ></DeviceOrder>
    </el-drawer>
  </div>
</template>

<script>
import {
  DeviceOrderList,
  DeviceOrderDelete,
  DeviceOrderExport,
} from "@/api/app.js";

import DeviceOrder from "./coponents/deviceOrder.vue";
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
export default {
  name: "deviceOrderList",
  components: { DeviceOrder, TableHeader, SettinUp },
  props: [],
  data() {
    return {
      modetip: "",
      tableData: [],
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      checkedList: [],
      searchParams: {},
      drawerVisible: false,
      mode: "add",
      nowId: "",
      tabIndex: "0",
      searchParams: {},
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
      operation_type: 1,
      dynParams: {},
    };
  },
  mounted() {
    this.getDataList();
  },
  computed: {
    headerId() {
      return "43";
    },
  },
  methods: {
    handleExport() {
      DeviceOrderExport({
        ...this.dynParams,
        ids: this.checkedList,
      }).then((res) => {
        const linkurl = "https://" + res.data.loaded_url;
        window.open(linkurl);
      });
    },
    handleSelectionChange(checked) {
      this.checkedList = checked.map((item) => item.id);
    },
    handleClickDetail_second(row) {
      this.handleOperation(row, "detail");
    },
    handleClickEdit_second(row) {
      this.handleOperation(row, "edit");
    },
    resultClickFn() {
      this.$refs.TableHeaderList.childMethod();
      this.paginations.pageIndex = 1;
      this.paginations.pageSize = 20;
      this.getDataList();
    },
    objSettinUp() {
      this.getDataList();
    },
    getDataList(setHeader = true) {
      const params = {
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
        header_id: this.headerId + "",
      };
      this.dynParams = params;
      DeviceOrderList(params).then((res) => {
        this.tableData = res.data.list || [];
        this.paginations.total = res.data.total;
        this.tableData.unshift({});
        this.header_data_list = this.tableData;
        if (setHeader) {
          this.HeaderData = res.data.item_list;
          this.Fntransformation(this.HeaderData);
        }
      });
    },
    objheader(obj) {
      this.paginations.pageIndex = 1;
      this.searchParams = obj;
      this.getDataList(false);
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    handleDeleteType(val) {
      this.checkedList = val;
    },
    handleOperation(row, mode) {
      this.nowId = row.id;
      this.mode = mode;
      this.drawerVisible = true;
    },
    handleCloseDrawer(isUpdate) {
      this.drawerVisible = false;
      isUpdate && this.getDataList();
    },

    handleCloseDialog() {
      this.dialogVisible = false;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getDataList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getDataList();
    },
    // getDataList() {
    //     DeviceOrderList({
    //         page: this.paginations.pageIndex,
    //         page_size: this.paginations.pageSize,
    //         ...this.searchParams,
    //     }).then((res) => {
    //         this.tableData = res.data.list || [];
    //         this.paginations.total = res.data.pagination.total;
    //     });
    // },
    handleDel() {
      if (this.checkedList.length === 0) {
        this.$message({
          message: "请选中后进行操作",
          type: "warning",
        });
        return;
      }
      DeviceOrderDelete({
        ids: this.checkedList,
      }).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getDataList();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 10px 15px;
  background-color: #fff;

  .orderHeader {
    margin-top: 5px;
    background-color: #fff;

    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;

    .el-button + .el-dropdown,
    .el-dropdown + .el-button {
      margin-left: 10px;
    }
  }
}
</style>